<template>
	<div class="goods-result" id="goods-result">
		<!--吸顶-->
		<van-sticky>
			<van-search v-model="params.keyWord" show-action placeholder="搜索商品名称、链接" @input="onInput" @search="onSearch">
				<div slot="action" @click="onSearch">搜索</div>
			</van-search>

			<div class="search__type">
				<button
					:class="[
						{
							active: type == item.value
						}
					]"
					v-for="(item, index) in options.type"
					:key="index"
					@click="changeType(item.value)"
				>
					{{ item.label }}
				</button>
			</div>

			<!--筛选栏-->
			<div class="filter-bar">
				<div class="sort-list">
					<sort
						v-for="(item, index) in sort"
						:key="index"
						:active="item.active"
						:index="index"
						:order="item.order"
						:title="item.title"
						@changeSort="changeSort"
					></sort>
				</div>
				<div class="check-list">
					<van-checkbox v-model="isChecked" shape="square" @change="refresh">优惠券</van-checkbox>
				</div>
			</div>
		</van-sticky>

		<!-- 搜索联想 -->
		<div class="link" v-if="isShowLink && suggestionList.length > 0">
			<div class="li" v-for="(item, index) in suggestionList" :key="index" @click="linkSearch(item)">{{ item }}</div>
		</div>

		<!--商品列表-->
		<van-list v-model="loading" :finished="finished" :error.sync="error" @load="loadMore" loading-text="拼命加载中">
			<div class="goods-list" v-if="goodsList.length > 0">
				<div class="goods-wrap" v-for="(item, index) in goodsList" :key="index">
					<goods-item ref="goodsItem" :item="item" v-if="type == 'tb'"></goods-item>
					<jd-goods-item
						ref="goodsItem"
						:item="item"
						v-if="type == 'jd'"
						@success="getUrl"
						@openDig="openDig"
						@error="errorDid"
					></jd-goods-item>
				</div>
			</div>
			<van-skeleton
				v-for="number in 3"
				:key="'number' + number"
				avatar
				avatar-size="140"
				avatar-shape="square"
				row="4"
				:row-width="['100%', '65%', '40%', '80%']"
				:loading="loading"
			></van-skeleton>
		</van-list>

		<!--开启超级搜-->
		<template v-if="finished || error">
			<div class="super-title">
				<i></i>
				<p>全网商品</p>
				<i></i>
			</div>

			<van-list v-model="superLoading" :finished="superFinished" :error.sync="superError" @load="superLoadMore" loading-text="拼命加载中">
				<div class="goods-list" v-if="superGoodsList.length > 0">
					<div class="goods-wrap" v-for="(item, index) in superGoodsList" :key="index">
						<goods-item ref="goodsItem" :item="item" type="superGoods" v-if="type == 'tb'"></goods-item>
						<jd-goods-item
							ref="goodsItem"
							:item="item"
							type="superGoods"
							v-if="type == 'jd'"
							@success="getUrl"
							@openDig="openDig"
							@error="errorDid"
						></jd-goods-item>
					</div>
				</div>
				<van-skeleton
					v-for="number in 3"
					:key="'superNumber' + number"
					avatar
					avatar-size="140"
					avatar-shape="square"
					row="4"
					:row-width="['100%', '65%', '40%', '80%']"
					:loading="superLoading"
				></van-skeleton>

				<div slot="error">
					<empty emptyText="无搜索结果，换个词试试吧～" :src="require('@/assets/images/common/empty-search.png')" offsetTop="150"></empty>
				</div>
			</van-list>
		</template>
		<JdLoadingDig ref="jdDig"></JdLoadingDig>
	</div>
</template>

<script>
import { Checkbox, Search, Skeleton, Sticky } from 'vant';
import { Sort, GoodsItem, Empty, JdGoodsItem } from '../../components';
import JdLoadingDig from '@/components/jd/JdLoadingDig';

import store from 'store';

export default {
	name: 'goods-result',
	components: {
		Sort,
		GoodsItem,
		'jd-goods-item': JdGoodsItem,
		Empty,
		'van-checkbox': Checkbox,
		'van-search': Search,
		'van-skeleton': Skeleton,
		'van-sticky': Sticky,
		JdLoadingDig
	},

	data() {
		return {
			suggestionList: [],
			isShowLink: false,
			sort: [
				{
					title: '综合',
					active: true,
					order: 'desc'
				},
				{
					title: '销量',
					active: false,
					order: ''
				},
				{
					title: '价格',
					active: false,
					order: ''
				}
			],
			isChecked: true,

			isRefresh: false, // 控制是否刷新
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			error: false, // 控制是否为空数据
			goodsList: [],
			params: {
				page: 1,
				size: 20,
				order: '',
				sort: 'desc',
				hasCoupon: 1,
				keyWord: '',
				cid: null
			},

			superIsRefresh: false, // 控制是否刷新
			superLoading: false, // 控制loading显示
			superFinished: false, // 控制是否加载更多商品
			superError: false, // 控制是否为空数据
			superGoodsList: [],
			superParams: {
				page: 1,
				size: 20,
				order: '',
				sort: 'desc',
				hasCoupon: 1,
				keyWord: '',
				cid: null
			},
			type: 'jd',
			options: {
				type: [
					{
						label: '淘宝',
						value: 'tb'
					},
					{
						label: '京东',
						value: 'jd'
					}
				]
			}
		};
	},
	created() {
		const { cid, keyWord } = this.$route.query;

		if (keyWord) {
			this.params.keyWord = keyWord;
		} else {
			this.params.keyWord = store.get('keyWord');
		}

		if (cid) {
			this.params.cid = cid;
		}

		this.type = store.get('jd-search-type') || 'jd';
	},
	mounted() {
		document.getElementById('goods-result').style.minHeight = document.documentElement.clientHeight + 'px';
	},
	destroyed() {
		store.remove('jd-search-type');
	},
	methods: {
		changeType(val) {
			this.type = val;
			store.set('jd-search-type', val);
			this.refresh();
		},
		refresh() {
			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.error = false;

			this.superGoodsList = [];
			this.superLoading = false;
			this.superFinished = false;
			this.superParams.page = 1;
			this.superError = false;

			document.getElementById('container').scrollTop = 0;

			this.$nextTick(() => {
				this.loadMore();
			});
		},
		changeSort(index, order) {
			this.sort.forEach(item => {
				item.active = false;
				item.order = '';
			});
			this.sort[index].order = order;
			this.sort[index].active = true;

			this.params.sort = order;
			this.superParams.sort = order;

			switch (index) {
				case 0:
					this.params.order = '';
					this.superParams.order = '';
					break;
				case 1:
					this.params.order = 'sale';
					this.superParams.order = 'sale';
					break;
				case 2:
					this.params.order = 'endPrice';
					this.superParams.order = 'endPrice';
					break;
				default:
					this.params.order = '';
					this.superParams.order = '';
			}
			if (!order) {
				this.params.order = '';
				this.superParams.order = '';
			}

			this.refresh();
		},
		linkSearch(keyWord) {
			if (keyWord) {
				this.params.keyWord = keyWord;
			}
			this.onSearch();
		},
		onSearch() {
			if (!this.params.keyWord) {
				this.$toast('请输入搜索关键词');
				return false;
			}
			// window.location.href = window.location.href.split('?')[0] + '?keyWord=' + this.params.keyWord;
			this.refresh();
			this.isShowLink = false;
		},
		onInput(keyWord) {
			this.suggestionList = [];
			if (keyWord) {
				this.isShowLink = true;
				let params = {
					keyWord: keyWord
				};
				// window.location.href = window.location.href.split('?')[0] + '?keyWord=' + keyWord;
				this.$service.shopping.goods.searchSuggestion(params).then(res => {
					this.suggestionList = res;
				});
			}
		},
		// 追加数据
		loadMore(operate) {
			this.params.hasCoupon = this.isChecked ? 1 : 0;

			store.set('keyWord', this.params.keyWord);

			let p = null;

			if (this.type == 'tb') {
				p = this.$service.shopping.goods.page(this.params);
			} else {
				p = this.$service.jd.goods.page(this.params);
			}

			p.then(res => {
				this.goodsList = this.goodsList.concat(res.list);
				// 加载状态结束
				this.loading = false;
				this.params.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 数据全部加载完成
				if (this.goodsList.length === 0) {
					this.params.page = 1;
					this.error = true;
				} else if (this.goodsList.length >= res.pagination.total) {
					this.finished = true;
				}
			});
		},
		// 超级搜
		superLoadMore(operate) {
			this.superParams.hasCoupon = this.params.hasCoupon;
			this.superParams.keyWord = this.params.keyWord;

			let p = null;

			if (this.type == 'tb') {
				p = this.$service.shopping.goods.superGoods(this.superParams);
			} else {
				p = this.$service.jd.goods.superGoods(this.superParams);
			}

			p.then(res => {
				this.superGoodsList = this.superGoodsList.concat(res.list || []);

				// 加载状态结束
				this.superLoading = false;
				this.superParams.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.superIsRefresh = false;
				}

				// 数据全部加载完成
				if (this.superGoodsList.length === 0) {
					this.superParams.page = 1;
					this.superError = true;
				} else if (this.superGoodsList.length >= res.pagination.total) {
					this.superFinished = true;
				}
			});
		},
		openDig() {
			this.$refs['jdDig'].open();
		},
		errorDid() {
			setTimeout(() => {
				this.$refs['jdDig'].hide();
			}, 500);
		},
		getUrl(e) {
			setTimeout(() => {
				this.$refs['jdDig'].hide();
				location.href = e;
			}, 500);
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-result {
	min-height: 100%;
	background: $color-white;
	/deep/.van-search {
		padding: 20px 0 6px 54px;

		.van-search__content {
			border: 2px solid $main-color;
			border-radius: 32px;
			padding-left: 40px;
		}

		.van-search__action {
			padding: 0 18px;
			font-size: 28px;
			color: $main-color;
		}
	}

	.link {
		width: 100%;
		height: calc(100% - 100px);
		background-color: white;
		position: fixed;
		top: 104px;
		left: 0;
		z-index: 1;
		padding: 0 34px;
		overflow: auto;

		.li {
			height: 84px;
			font-size: 26px;
			line-height: 84px;
			border-bottom: 2px solid #ebebeb;
		}
	}

	.filter-bar {
		padding: 20px 0;
		background: $color-white;
		display: flex;

		.sort-list {
			display: flex;
			width: 74%;
			border-right: 2px solid #c8c8c8;
		}

		.check-list {
			width: 36%;
			@include flexBox(center);
			padding-right: 10px;

			/deep/.van-checkbox {
				@include flexBox(null, null, row-reverse);

				.van-checkbox__icon {
					height: 32px;

					.van-icon {
						width: 32px;
						height: 32px;
						border-radius: 4px;
						font-size: 28px;
						@include flexBox(center, center);
					}
				}

				.van-checkbox__icon--checked {
					.van-icon {
						background: $main-color;
						border-color: $main-color;
					}
				}

				.van-checkbox__label {
					font-size: 26px;
					color: #727272;
					margin-right: 10px;
				}
			}
		}
	}
	.van-list {
		padding: 30px;
		.goods-list {
			margin-top: 10px;
			background: $color-white;
			margin-bottom: 30px;
			.goods-wrap {
				padding-top: 30px;
				margin-top: 30px;
				border-top: 2px dotted #e2e2e2;

				&:first-child {
					padding-top: 0;
					margin-top: 0;
					border-top: none;
				}
			}
		}
		.van-skeleton {
			margin-bottom: 30px;
			padding: 0 0 30px 0;
			border-bottom: 1px dotted #f2f3f5;
			.van-skeleton__avatar {
				border-radius: 16px;
			}
			.van-skeleton__content {
				padding-top: 0;
				@include flexBox(space-between, null, column);
			}
			.van-skeleton__row {
				border-radius: 8px;
			}
		}
	}

	.super-title {
		padding: 0 30px;
		@include flexBox(center, center);
		p {
			text-align: center;
			font-size: 34px;
			font-weight: 600;
			margin: 0 50px;
		}
		i {
			width: 98px;
			height: 2px;
			background: #d0d0d0;
		}
	}
}

.search__type {
	display: flex;
	justify-content: center;
	background-color: #fff;

	button {
		font-size: 28px;
		background-color: #fff;
		border-radius: 0;
		padding: 0;
		letter-spacing: 6px;
		font-weight: bold;
		border: 0;
		height: 70px;
		line-height: 70px;
		margin: 0 50px;

		&.active {
			border-bottom: 4px solid #ff204b;
			color: #ff204b;
		}
	}
}
</style>
